﻿@using AdvancedPoll.ViewModels;

@model PollViewModel
           
@{
    Style.Require("PublishLater_DatePicker");
    Style.Require("AdvancedPoll_Editor");
}

<fieldset>
    <legend>Poll Fields</legend>
    <div class="editor-label">
        @Html.LabelFor(m => m.Question)
    </div>
    <div class="editor-field">
        <input id="@Html.FieldIdFor(m => m.Question)" class="textMedium" type="text" placeholder="Question" value="@Model.Question" name="@Html.FieldNameFor(m => m.Question)" />
        @Html.ValidationMessageFor(m => m.Question)
    </div> 
    <div class="editor-label">
        <label class="forpicker" for="@Html.FieldIdFor(m => m.Open)">@T("Open")</label>
        @Html.LabelFor(m => m.Open)
    </div>
    <div class="editor-field">
        @Html.EditorFor(m => m.Open)
        @Html.ValidationMessageFor(m => m.Open)
    </div> 
    <div class="editor-label">
        <label class="forpicker" for="@Html.FieldIdFor(m => m.Close)">@T("Close")</label>
        @Html.LabelFor(m => m.Close)
    </div>
    <div class="editor-field">
        @Html.EditorFor(m => m.Close)
        @Html.ValidationMessageFor(m => m.Close)
    </div> 

    <div class="editor-label">
        @Html.LabelFor(m => m.MaxVotes)
    </div>
    <div class="editor-field">
        <input id="@Html.FieldIdFor(m => m.MaxVotes)" class="text-small" type="text" value="@Model.MaxVotes" step="1" name="@Html.FieldNameFor(m => m.MaxVotes)" min="1" max="1000000" title="Maximum number of answer, that user can choose"/>
        @Html.ValidationMessageFor(m => m.MaxVotes)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.Shown)
    </div>
    <div class="editor-field">
        @Html.CheckBoxFor(m => m.Shown)
        @Html.ValidationMessageFor(m => m.Shown)
    </div>

    <!-- sheepIt Form -->
    <div id="myForm">

        <!-- Form template-->
        <div id="myForm_template" class="AdvancedPoll_Answer">
            <label for="myForm_#index#_Answer">Answer #index#</label>
            <input id="myForm_#index#_Answer" name="Choices[#index#].Choice.Answer" type="text" placeholder="Answer #index#" />
            <input id="myForm_#index#_Id" name="Choices[#index#].Choice.Id" type="hidden" />
            <input id="myForm_#index#_Action" name="Choices[#index#].Action" type="hidden" />
            <a id="myForm_remove_current">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        </div>
        <!-- /Form template-->

        <!-- No forms template -->
        <div id="myForm_noforms_template">No phones</div>
        <!-- /No forms template-->

        <!-- Controls -->
        <div id="myForm_controls">
            <div id="myForm_add"><a><span>Add answer</span></a></div>
            <div id="myForm_remove_last"><a><span>Remove</span></a></div>
            <div id="myForm_remove_all"><a><span>Remove all</span></a></div>
            <div id="myForm_add_n">
                <input id="myForm_add_n_input" type="text" size="4" />
                <div id="myForm_add_n_button"><a><span>Add</span></a></div>
            </div>
        </div>
        <!-- /Controls -->

    </div>
    <!-- /sheepIt Form -->
</fieldset>


@using (Script.Foot()) {
    Script.Require("SheepItPlugin");
    @Display(New.DatePickerLocalization())

<script type="text/javascript">
    $(document).ready(function () {

        var clearHint = function ($this) { if ($this.val() == $this.data("hint")) { $this.removeClass("hinted").val("") } };
        var resetHint = function ($this) { setTimeout(function () { if (!$this.val()) { $this.addClass("hinted").val($this.data("hint")) } }, 300) };
        @* todo: (heskew) make a plugin *@
        $("label.forpicker").each(function () {
            var $this = $(this);
            var pickerInput = $("#" + $this.attr("for"));
            if (!pickerInput.val()) {
                pickerInput.data("hint", $this.text());
                pickerInput.addClass("hinted")
                    .val(pickerInput.data("hint"))
                    .focus(function () { clearHint($(this)); })
                    .blur(function () { resetHint($(this)); });
                $this.closest("form").submit(function () { clearHint(pickerInput); pickerInput = 0; });
            }
        });
        $("#@Html.FieldIdFor(m => m.Open)").datepicker({ showAnim: "" });
        $("#@Html.FieldIdFor(m => m.Close)").datepicker({ showAnim: "" });

        var initedAnswer = 0;

        var sheepItForm = $('#myForm').sheepIt({
            separator: '',
            allowRemoveLast: true,
            allowRemoveCurrent: true,
            allowRemoveAll: true,
            allowAdd: true,
            allowAddN: false,
            maxFormsCount: 15,
            minFormsCount: 2,
            iniFormsCount: 2,
            afterFill: function (source, form, values) {
                initedAnswer++;
            },
            afterAdd: function (source, newForm) {
                //var id = $(newForm).attr('id');
                //id = id.replace('myForm_template', '');
                //alert($(source).html());
                //alert($('#myForm_' + id + '_Id').attr('name'));
                if (initedAnswer == '@Model.Choices.Count') {
                    var answer = $('.AdvancedPoll_Answer').last();
                    var id = $(answer).attr('id');
                    id = id.replace('myForm_template', '');
                    $('#myForm_' + id + '_Id').attr('value', '0');
                    $('#myForm_' + id + '_Action').attr('value', 'Create');
                }
            },
            beforeAdd: function (source) {
                //alert('Before add form');
            },
            afterClone: function (source, clone) {
                //alert('After clone form');
            },
            beforeClone: function (source, template) {
                //alert('Before clone form');
            },
            data: [
                    @foreach (var c in Model.Choices) 
                    {
                        <text>
                        {
                            'Id': '@Html.Raw(@c.Choice.Id.ToString())',
                            'Action': '@Html.Raw(@c.Action)',
                            'Answer': '@Html.Raw(@c.Choice.Answer)'
                        }
                        </text>
                        if(Model.Choices.Last() != c) {
                            <text>,</text>
                        }
                     }
            ]
        });
    });
</script>
}